<template>

	<div class="tabLink">
		<div @click="getContent(item.id)" :class="{ current: item.checked }" v-for="item in menuList"
			class="tabLink-item" :key="item.id">{{ item.value }}
			<div class="checked-bottom" v-show="item.checked"></div>
		</div>
	</div>

</template>

<script>
	export default {
		name: "common-tab",
		props: {
			menuList: {
				type: Array,
				default: () => {
					return []
				},
			}

		},
		data() {
			return {
				flag: 1,
			};
		},
		methods: {
			//产品图片导航切换
			getContent(id) {

				this.flag = id;
				for (const i in this.menuList) {
					if (this.menuList[i].id == id) {
						this.menuList[i].checked = true;
					} else {
						this.menuList[i].checked = false;
					}
				}
				this.$emit("getSelectedId", id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabLink {
		width: 100%;
		background: #F5FBFC;
		border-radius: 6px;
		line-height: 54px;
		text-align: center;
		display: flex;
		letter-spacing: 1.14px;
		color: #001124;
		cursor: pointer;

		.tabLink-item {
			margin: 0 40rpx;
			direction: column;
			display: flex;
			justify-content: center;
			text-align: center;
			margin-right: 30px;
			font-size: 14px;
			display: block;
			font-weight: bold;
		}

		.checked-bottom {
			width: 100%;
			height: 8rpx;
			background: #60C7D0;
		}
	}

	.current {
		color: #009088;
	}
</style>
